<script setup lang="ts">

import useDialogStore from "@/store/dialog/index.ts";
import {computed, reactive, ref} from "vue";
import CountDown from "@/components/count_down/countDown.vue";
import {useRoute} from "vue-router";
import router from "@/router";
import {ElMessage} from "element-plus";

const dialogStore = useDialogStore();

const loginParamRef = ref()

//控制短信按钮切换
const isFlag = ref(false)
//控制是否扫码登录
const isWxCodeLogin = ref(false)

const loginParam = reactive({
  phone: "",
  code: ""
})


//切换二维码登录
const changeWxCode = () => {
  isWxCodeLogin.value = true
}


//判断手机号是否符合规则
const isPhone = computed(() => {
  const rex = /^1\d{10}$/
  return rex.test(loginParam.phone)
})

//调用短信验证接口
const sendPhone = async () => {
  isFlag.value = true
  await dialogStore.getLoginCodeData(loginParam.phone)
  //显示code在页面
  loginParam.code = dialogStore.code
}

//显示获取验证码组件
const showSend = (value: boolean) => {
  isFlag.value = value
}

// 自定义校验规则
const validatePhone = (rule: any, value: any, callback: any) => {
  console.log("value", value)
  const rex = /^1\d{10}$/
  if (rex.test(value)) {
    //放行
    callback()
  } else {
    //抛出异常提示信息
    callback(new Error("请输入合法的手机号码"))
  }
}

const validateCode = (rule: any, value: any, callback: any) => {
  const rex = /^\d{6}$/
  if (rex.test(value)) {
    //放行
    callback()
  } else {
    //抛出异常提示信息
    callback(new Error("请输入6位验证码"))
  }
}
const rules = {
  phone: [{required: true, validator: validatePhone, trigger: 'change'}],
  code: [{required: true, validator: validateCode, trigger: 'change'}],
}

//用户登录
const route = useRoute();
const loginBtn = async () => {
  //检验表单是否符合规定
  await loginParamRef.value.validate()
  //登录接口调用
  await dialogStore.loginData(loginParam)
  //关闭弹弹窗页面
  dialogStore.isShow = false

  //获取路由
  const path = route.query.redirect as string
  if (path) {
    router.push(path)
  } else {
    router.push("/home")
  }

}


//切换手机号码登录
const changeCodeLogin = () => {
  isWxCodeLogin.value = false
}

</script>

<template>
  <div class="login">
    <el-dialog
        v-model="dialogStore.isShow"
        title="用户登录"
        width="50%"
    >
      <div class="content">
        <el-row>
          <!--          left-->
          <el-col :span="12" class="left">
            <div v-if="isWxCodeLogin" class="isWxCodeLogin">
              <img src="@/assets/images/code_app.png">
              <p>使用微信扫一扫登录</p>
              <p @click="changeCodeLogin" class="codeLogin">手机短信验证码登录</p>
              <el-icon>
                <Iphone/>
              </el-icon>
            </div>
            <el-form ref="loginParamRef" :model="loginParam" :rules="rules" v-else>
              <el-form-item prop="phone">
                <el-input v-model="loginParam.phone" prefix-icon="User" placeholder="请输入手机号"/>
              </el-form-item>
              <el-form-item prop="code">
                <el-input :disabled="!isPhone?true:false" v-model="loginParam.code" prefix-icon="Lock"
                          placeholder="请输入验证码"/>
              </el-form-item>
              <el-form-item>
                <el-button v-if="!isFlag" :disabled="!isPhone?true:false" @click="sendPhone">获取验证码</el-button>
                <count-down v-else @show-send="showSend"/>
              </el-form-item>
              <el-form-item>
                <el-button :disabled="!isPhone || loginParam.code.length===0 ?true:false"
                           type="primary"
                           class="btn"
                           @click="loginBtn">用户登录
                </el-button>
              </el-form-item>
              <div class="loginWX">
                <span class="login-btn" @click="changeWxCode">微信扫码登录</span>
                <span>
                 <svg t="1712833822756" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="7436" width="48" height="48"><path
                     d="M693.12 356.48c11.52 0 23.68 0.64 35.2 1.92-31.36-137.6-187.52-240.64-365.44-240.64C163.2 118.4 0 246.4 0 408.96 0 503.04 54.4 580.48 145.28 640l-36.48 103.04 126.72-60.16c45.44 8.32 81.92 17.28 126.72 17.28 11.52 0 22.4-0.64 33.92-1.28-7.04-23.04-10.88-46.72-10.88-71.68 0-149.12 135.68-270.72 307.84-270.72zM498.56 263.68c27.52 0 45.44 16.64 45.44 42.88 0 25.6-17.92 42.88-45.44 42.88-26.88 0-54.4-17.28-54.4-42.88s26.88-42.88 54.4-42.88zM244.48 349.44c-26.88 0-54.4-17.28-54.4-42.88s27.52-42.88 54.4-42.88 45.44 16.64 45.44 42.88c0 25.6-17.92 42.88-45.44 42.88zM1024 623.36c0-136.96-145.28-248.32-307.84-248.32-172.16 0-308.48 111.36-308.48 248.32 0 136.96 135.68 248.32 308.48 248.32 35.84 0 72.32-8.32 108.8-17.28l99.2 51.2-27.52-85.76c72.96-51.2 127.36-119.68 127.36-196.48z m-407.68-42.88c-17.92 0-36.48-16.64-36.48-34.56 0-16.64 18.56-33.92 36.48-33.92 27.52 0 45.44 17.28 45.44 33.92 0 17.28-17.92 34.56-45.44 34.56z m199.04 0c-17.92 0-35.84-16.64-35.84-34.56 0-17.28 17.92-33.92 35.84-33.92 26.88 0 45.44 17.28 45.44 33.92 0 17.28-17.92 34.56-45.44 34.56z m0 0"
                     fill="#F13A3A" p-id="7437"></path></svg>
               </span>
              </div>
            </el-form>
          </el-col>

          <!--          right-->
          <el-col :span="12">
            <div class="right">
              <div class="attention">
                <img src="@/assets/images/code_app.png">
                <svg t="1712890432058" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4293" width="16" height="16">
                  <path
                      d="M571.648 511.94c-10.257 0-20.517 9.525-20.517 21.25 0 9.527 10.255 19.053 20.517 19.053 15.393 0 26.385-9.527 26.385-19.053 0-11.724-10.99-21.25-26.385-21.25v0zM504.225 413c16.123 0 26.385-10.257 26.385-25.651 0-16.123-10.261-25.649-26.385-25.649-15.39 0-30.048 9.527-30.048 25.649-0.001 15.396 14.659 25.651 30.048 25.651v0zM512.287 62.492c-248.427 0-449.813 201.386-449.813 449.813 0 248.425 201.386 449.812 449.813 449.812 248.425 0 449.812-201.386 449.812-449.812 0.001-248.427-201.385-449.813-449.812-449.813v0zM427.275 626.265c-27.119 0-46.906-4.394-72.556-11.725l-74.019 37.38 21.257-63.031c-52.035-36.64-82.818-82.811-82.818-139.243 0-99.67 93.808-175.889 208.137-175.889 101.135 0 191.279 60.097 208.867 145.113-7.328-1.469-13.926-2.199-19.788-2.199-99.67 0-176.619 74.75-176.619 164.894 0 15.388 2.199 29.313 5.863 43.972-5.863 0.728-12.461 0.728-18.324 0.728v0zM732.882 698.085l14.655 52.77-55.697-31.512c-21.252 4.394-41.773 10.99-63.025 10.99-98.206 0-175.889-67.422-175.889-150.968 0-83.547 77.685-150.97 175.889-150.97 93.072 0 176.619 67.423 176.619 150.97 0 46.9-31.512 88.673-72.552 118.721v0zM359.117 361.7c-15.39 0-31.512 9.527-31.512 25.649 0 15.395 16.122 25.656 31.512 25.656 14.66 0 26.385-10.261 26.385-25.656 0-16.122-11.725-25.649-26.385-25.649v0zM686.712 511.94c-10.995 0-20.522 9.525-20.522 21.25 0 9.527 9.527 19.053 20.522 19.053 14.655 0 25.649-9.527 25.649-19.053 0-11.724-10.994-21.25-25.649-21.25v0zM686.712 511.94z"
                      p-id="4294"></path>
                </svg>
                <span class="desc">微信扫一扫关注</span>
                <span>"快速预约挂号"</span>
              </div>
              <div class="download">
                <img src="@/assets/images/code_login_wechat.png">
                <svg t="1712890526951" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="6287" width="16" height="16">
                  <path
                      d="M256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m0 64a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256z m170.666667 618.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z"
                      fill="#000000" p-id="6288"></path>
                </svg>
                <span class="desc">扫一扫下载</span>
                <span>"预约挂号" APP</span>
              </div>
              <div class="title">
                <h2> 尚医通官方指定平台</h2>
                <h2>快速挂号 安全放心</h2>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogStore.isShow = false">
            关闭窗口
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.login {
  .testss {
    color: red;
  }

  :deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .content {
    padding: 20px 10px;

    .left {
      border: 1px solid #ccc;
      padding: 20px;

      .btn {
        width: 100%;
      }

      .loginWX {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .login-btn {
        cursor: pointer;

        &.login-btn:hover {
          color: red;
        }
      }
    }
  }

  .right {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;

    img {
      width: 150px;
      height: 150px;
    }

    .attention {
      display: flex;
      flex-direction: column;
      align-items: center;

      .desc {
        margin-bottom: 10px;
      }
    }

    .download {
      display: flex;
      flex-direction: column;
      align-items: center;

      .desc {
        margin-bottom: 10px;
      }
    }
  }
}


.isWxCodeLogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .codeLogin {
    cursor: pointer;

    &:hover {
      color: red;
    }
  }

  img {
    width: 200px;
    height: 200px;
  }
}
</style>
